<template>
  <div class="firstMoney">
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      label-width="170px"
      class="demo-ruleForm"
    >
      <el-form-item label="开通子账户支付公司：">
        <el-radio-group v-model="ruleForm.type">
          <el-radio v-for="item in typeList" :key="item.id" :label="item.id">{{item.value}}</el-radio>
        </el-radio-group>
      </el-form-item>
      <div class="list">
        <el-form-item label="子商户类型：" prop="merchantType">
          <el-select
            v-model="ruleForm.merchantType"
            placeholder="请选择子商户类型"
          >
            <el-option
              v-for="item in merchantTypeList"
              :key="item.id"
              :label="item.value"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
      </div>
      <div class="list">
        <el-form-item label="经营类别：" prop="merchantCategory">
          <el-select
            v-model="ruleForm.merchantCategory"
            placeholder="请选择经营类别"
            @change="handleCategory"
          >
            <el-option
              v-for="item in merchantCategoryList"
              :key="item.id"
              :label="item.value"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
      </div>
      <div class="list">
        <el-form-item label="行业类型编码：" prop="industryTypeCode">
          <el-select
            v-model="ruleForm.industryTypeCode"
            placeholder="请选择行业类型编码"
            :disabled="showIndustryTypeCode"
          >
            <el-option
              v-for="item in industryTypeCodeList"
              :key="item.code"
              :label="item.name"
              :value="item.code"
            ></el-option>
          </el-select>
        </el-form-item>
        <div class="rigTxt">需选择与经营类别一致，若找不到对应行业类型，请更换经营类别</div>
      </div>
      <div class="list">
        <el-form-item label="公司账号名称：" prop="signName">
          <el-input v-model="ruleForm.signName" placeholder="请输入公司账号名称"></el-input>
        </el-form-item>
        <div class="rigTxt">企业商户填写营业执照上的工商注册名称；个人商户填写店铺名称；签约名为5～150个字</div>
      </div>
      <div class="list">
        <el-form-item label="展示名：" prop="showName">
          <el-input v-model="ruleForm.showName" placeholder="用户支付后展示收款信息"></el-input>
        </el-form-item>
        <div class="rigTxt">展示名为2～20个字</div>
      </div>
      <div class="list">
        <el-form-item label="法人证件类型：" prop="idType">
          <el-select
            v-model="ruleForm.idType"
            placeholder="请选择法人证件类型"
          >
            <el-option
              v-for="item in idTypeList"
              :key="item.id"
              :label="item.value"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
      </div>
      <div class="list">
        <el-form-item label="法人名字：" prop="legalPerson">
          <el-input v-model="ruleForm.legalPerson" placeholder="请输入法人姓名"></el-input>
        </el-form-item>
      </div>
      <div class="list">
        <el-form-item label="法人身份证号：" prop="legalPersonID">
          <el-input v-model="ruleForm.legalPersonID" placeholder="请输入法人身份证号"></el-input>
        </el-form-item>
      </div>
      <div class="list">
        <el-form-item label="法人身份证开始日期：" prop="idCardStartDate">
          <el-date-picker
            v-model="ruleForm.idCardStartDate"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="选择日期"
          >
          </el-date-picker>
        </el-form-item>
        <div class="rigTxt">用于开通微信支付子商户</div>
      </div>
      <div class="list">
        <el-form-item
          label="法人身份证结束日期："
          :prop="ruleForm.idCardValidType ? '' : 'idCardEndDate'"
        >
          <el-date-picker
            v-model="ruleForm.idCardEndDate"
            type="date"
            :disabled="ruleForm.idCardValidType"
            value-format="yyyy-MM-dd"
            ref="timeForm"
            placeholder="选择日期"
          >
          </el-date-picker>
        </el-form-item>
        <div class="longTime">
          <el-checkbox
            v-model="ruleForm.idCardValidType"
            @change="changeCardValidType"
            >长期有效</el-checkbox
          >
        </div>
        <div class="rigTxt">用于开通微信支付子商户</div>
      </div>
      <div class="list">
        <el-form-item label="经营起始日期：" prop="businessDateStart">
          <el-date-picker
            v-model="ruleForm.businessDateStart"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="选择日期"
          >
          </el-date-picker>
        </el-form-item>
        <div class="rigTxt">用于开通微信支付子商户</div>
      </div>
      <div class="list">
        <el-form-item label="经营期限：" prop="businessDateLimit">
          <el-date-picker
            v-model="ruleForm.businessDateLimit"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="选择日期"
          >
          </el-date-picker>
        </el-form-item>
        <div class="rigTxt">用于开通微信支付子商户</div>
      </div>
      <div class="list">
        <el-form-item label="组织机构代码：" prop="orgNum">
          <el-input v-model="ruleForm.orgNum" placeholder="请输入组织机构代码"></el-input>
        </el-form-item>
        <div class="rigTxt">个人商户，统一填写身份证号；三证合一，则统一填营业执照号</div>
      </div>
      <div class="list">
        <el-form-item label="营业执照号：" prop="businessLicense">
          <el-input v-model="ruleForm.businessLicense" placeholder="请输入营业执照号"></el-input>
        </el-form-item>
      </div>
      <div class="list">
        <el-form-item label="区县编码：" prop="regionCodes">
          <el-cascader
            :props="addressProps"
            v-model="ruleForm.regionCodes"
            @change="getNodes"
            placeholder="请选择地址"
          ></el-cascader>
        </el-form-item>
      </div>
      <div class="list">
        <el-form-item label="通讯地址：" prop="address">
          <el-input v-model="ruleForm.address" placeholder="请输入通讯地址"></el-input>
        </el-form-item>
        <div class="rigTxt">建议填写营业执照上注册地址或门店地址</div>
      </div>
      <div class="list">
        <el-form-item label="联系人：" prop="linkman">
          <el-input v-model="ruleForm.linkman" placeholder="请输入联系人"></el-input>
        </el-form-item>
        <div class="rigTxt">商家联系人</div>
      </div>
      <div class="list">
        <el-form-item label="联系人身份证号：" prop="linkManId">
          <el-input v-model="ruleForm.linkManId" placeholder="请输入联系人身份证号"></el-input>
        </el-form-item>
        <div class="rigTxt">商家联系人身份证号</div>
      </div>
      <div class="list">
        <el-form-item label="联系电话：" prop="linkPhone">
          <el-input v-model="ruleForm.linkPhone" placeholder="请输入联系电话"></el-input>
        </el-form-item>
        <div class="rigTxt">商家联系方式</div>
      </div>
      <div class="list">
        <el-form-item label="联系邮箱：" prop="email">
          <el-input v-model="ruleForm.email" placeholder="请输入联系邮箱"></el-input>
        </el-form-item>
        <div class="rigTxt">需要校验邮箱在支付公司的唯一性，用于接受支付公司邮件</div>
      </div>
      <div class="list">
        <el-form-item label="结算卡联行号：" prop="bankCode">
          <el-input v-model="ruleForm.bankCode" placeholder="请输入结算卡联行号"></el-input>
        </el-form-item>
        <div class="rigTxt">联行号；注：需商户电话联系银行核实具体联行号</div>
      </div>
      <div class="list">
        <el-form-item label="开户名：" prop="accountName">
          <el-input v-model="ruleForm.accountName" placeholder="请输入开户名"></el-input>
        </el-form-item>
        <div class="rigTxt">企业商户为营业执照上公司名称；个人商户为银行卡姓名</div>
      </div>
      <div class="list">
        <el-form-item label="开户账号：" prop="accountNo">
          <el-input v-model="ruleForm.accountNo" placeholder="请输入开户账号"></el-input>
        </el-form-item>
      </div>
      <div class="list">
        <el-form-item label="开户行银行名称：" prop="bankName">
          <el-input v-model="ruleForm.bankName" placeholder="请输入开户行银行名称"></el-input>
        </el-form-item>
      </div>
      <div class="list">
        <el-form-item label="开户行支行：" prop="bankBranch">
          <el-input v-model="ruleForm.bankBranch" placeholder="请输入开户行支行"></el-input>
        </el-form-item>
      </div>
      <div class="list">
        <el-form-item label="结算卡类型：" prop="settleBankType">
          <el-select
            v-model="ruleForm.settleBankType"
            placeholder="请选择结算卡类型"
          >
            <el-option
              v-for="item in settleBankTypeList"
              :key="item.id"
              :label="item.value"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
      </div>
      <div class="list">
        <el-form-item label="结算类型：" prop="settlementPeriod">
          <el-select
            v-model="ruleForm.settlementPeriod"
            placeholder="请选择结算类型"
          >
            <el-option
              v-for="item in settlementPeriodList"
              :key="item.id"
              :label="item.value"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
      </div>
      <div class="list">
        <el-form-item label="结算卡方式：" prop="settlementMode">
          <el-select
            v-model="ruleForm.settlementMode"
            placeholder="请选择结算卡方式"
          >
            <el-option
              v-for="item in settlementModeList"
              :key="item.id"
              :label="item.value"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
      </div>
    </el-form>
  </div>
</template>
<script>
import { mapState } from "vuex";
// components
import Loading from "@/components/Loading/index";

// api
import { getarea, getMcc } from "@/api/moneyManagement";

let id = 0;
export default {
  components: {
    Loading,
  },
  props: {
    oneEditData: Object,
    id: String,
    orType: String,
  },
  data() {
    var validateSonId = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入身份证号"));
      } else {
        var reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
        if (reg.test(value) === false) {
          callback(new Error("请输入正确的身份证号"));
        }
        callback();
      }
    };
    var validatePhone = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入手机号码"));
      } else {
        var reg = /^1(3[0-9]|4[5,7]|5[0,1,2,3,5,6,7,8,9]|6[2,5,6,7]|7[0,1,7,8]|8[0-9]|9[1,8,9])\d{8}$/;
        if (reg.test(value) === false) {
          callback(new Error("请输入正确的手机号码"));
        }
        callback();
      }
    };
    var validateEmail = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入邮箱"));
      } else {
        var reg = /^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}$/;
        if (reg.test(value) === false) {
          callback(new Error("请输入正确的邮箱"));
        }
        callback();
      }
    };
    return {
      addressProps: {
        lazy: true,
        value: "code",
        label: "name",
        lazyLoad(node, resolve) {
          const { level, root, data } = node;
          console.log("node", node);
          if (root) {
            const params = {
              level: 1,
              parentCode: 0,
            };
            getarea(params)
              .then((res) => {
                const result = res.result.map((item) => {
                  return {
                    code: item.code,
                    name: item.name,
                  };
                });
                resolve(result);
              })
              .finally(() => {
                this.loading = false;
              });
          }
          if (level == 1) {
            const params = {
              level: 2,
              parentCode: node.value,
            };
            getarea(params)
              .then((res) => {
                const result = res.result.map((item) => {
                  return {
                    code: item.code,
                    name: item.name,
                  };
                });
                resolve(result);
              })
              .finally(() => {
                this.loading = false;
              });
          }
          if (level == 2) {
            const params = {
              level: 3,
              parentCode: node.value,
            };
            getarea(params)
              .then((res) => {
                const result = res.result.map((item) => {
                  return {
                    code: item.code,
                    name: item.name,
                    leaf: level >= 2,
                  };
                });
                resolve(result);
              })
              .finally(() => {
                this.loading = false;
              });
          }
        },
      },
      typeList: [{ id: "1", value: "合利宝" }],
      timeList: [
        { id: "1", value: "长期有效" },
        { id: "2", value: "选择时间" },
      ],
      industryTypeCodeList: [], //行业类别编码
      showIndustryTypeCode: true, //行业类别编码是否可选
      
      ruleForm: {
        
        type: '1', //开通子账户支付公司
        merchantType: "", //子商户类型
        merchantCategory: "", //经营类别
        industryTypeCode: "", //行业类型编码
        signName: "", //公司账号名称：
        showName: "", //展示名
        idType: "", //法人证件类型
        legalPerson: "", //法人名字
        legalPersonID: "", //法人身份证号
        idCardValidType: false,
        idCardStartDate: "", //法人身份证开始日期
        idCardEndDate: "", //法人身份证结束日期
        businessDateStart: "", //经营起始日期
        businessDateLimit: "", //经营期限
        orgNum: "", //组织机构代码
        businessLicense: "", //营业执照号
        regionCodes: [], //区县编码
        address: "", //通讯地址
        linkman: "", //联系人
        linkManId: "",
        linkPhone: "", //联系电话
        email: "", //联系邮箱
        bankName: "", //结算卡银行
        bankBranch: "", //结算卡银行支行
        bankCode: "", //结算卡联行号
        accountName: "", //开户名
        accountNo: "", //开户账号
        settleBankType: "", //结算卡类型
        settlementPeriod: "", //结算类型
        settlementMode: "", //结算卡方式
      },
      rules: {
        // { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        type: [
          { required: true, message: "请选择", trigger: "blur" },
        ],
        merchantType: [{ required: true, message: "请选择", trigger: "blur" }],
        merchantCategory: [
          { required: true, message: "请选择", trigger: "blur" },
        ],
        industryTypeCode: [
          { required: true, message: "请选择", trigger: "blur" },
        ],
        signName: [
          { required: true, message: "请输入公司账号名称", trigger: "blur" },
          {
            min: 5,
            max: 150,
            message: "输入为5～150个字，请重新输入",
            trigger: "blur",
          },
        ],
        showName: [
          { required: true, message: "请输入展示名", trigger: "blur" },
          {
            min: 2,
            max: 20,
            message: "输入为2～20个字，请重新输入",
            trigger: "blur",
          },
        ],
        idType: [{ required: true, message: "请选择", trigger: "blur" }],
        legalPerson: [
          { required: true, message: "请输入姓名", trigger: "blur" },
          {
            min: 1,
            max: 20,
            message: "输入为1～20个字，请重新输入",
            trigger: "blur",
          },
        ],
        legalPersonID: [
          { required: true, validator: validateSonId, trigger: "blur" },
        ],
        idCardStartDate: [
          { required: true, message: "请选择身份证起始日期", trigger: "blur" },
        ],
        idCardEndDate: [
          { required: true, message: "请选择身份证结束日期", trigger: "blur" },
        ],
        businessDateStart: [
          { required: true, message: "请选择经营起始日期", trigger: "blur" },
        ],
        businessDateLimit: [
          { required: true, message: "请选择经营期限", trigger: "blur" },
        ],
        orgNum: [
          { required: true, message: "请输入组织机构代码", trigger: "blur" },
        ],
        businessLicense: [
          { required: true, message: "请输入营业执照号", trigger: "blur" },
        ],
        regionCodes: [
          { required: true, message: "请选择区县编码", trigger: "blur" },
        ],
        address: [
          { required: true, message: "请输入通讯地址", trigger: "blur" },
          {
            min: 5,
            max: 150,
            message: "输入为5～150个字，请重新输入",
            trigger: "blur",
          },
        ],
        linkman: [
          { required: true, message: "请输入联系人", trigger: "blur" },
          {
            min: 1,
            max: 15,
            message: "输入为1～15个字，请重新输入",
            trigger: "blur",
          },
        ],
        linkManId: [
          { required: true, validator: validateSonId, trigger: "blur" },
        ],
        linkPhone: [
          { required: true, validator: validatePhone, trigger: "blur" },
        ],
        email: [{ required: true, validator: validateEmail, trigger: "blur" }],
        bankName: [
          { required: true, message: "请输入开户行名称", trigger: 'blur' },
          {
            min: 1,
            max: 50,
            message: "输入为1～50个字，请重新输入",
            trigger: "blur",
          },
        ],
        bankBranch: [
          { required: true, message: "请输入开户行支行", trigger: "blur" },
          {
            min: 1,
            max: 50,
            message: "输入为1～50个字，请重新输入",
            trigger: "blur",
          },
        ],
        bankCode: [
          { required: true, message: "请输入结算卡联行号", trigger: "blur" },
          {
            min: 1,
            max: 13,
            message: "输入为1～13个字，请重新输入",
            trigger: "blur",
          },
        ],
        accountName: [
          { required: true, message: "请输入开户名", trigger: "blur" },
          {
            min: 1,
            max: 50,
            message: "输入为1～50个字，请重新输入",
            trigger: "blur",
          },
        ],
        accountNo: [
          { required: true, message: "请输入开户账号", trigger: "blur" },
          {
            min: 1,
            max: 30,
            message: "输入为1～30个字，请重新输入",
            trigger: "blur",
          },
        ],
        settleBankType: [
          { required: true, message: "请选择", trigger: "blur" },
        ],
        settlementPeriod: [
          { required: true, message: "请选择", trigger: "blur" },
        ],
        settlementMode: [
          { required: true, message: "请选择", trigger: "blur" },
        ],
      },
    };
  },

  computed: {
    ...mapState({
      merchantTypeList: function (state) {
        return state.common["merchant_entry_hlb_merchant_type"]; // 要取this的实例，只能用不同函数，不能用箭头函数
      },
      idTypeList: function (state) {
        return state.common["merchant_fund_entry_idtype"]; // 要取this的实例，只能用不同函数，不能用箭头函数
      },

      settleBankTypeList: function (state) {
        return state.common["merchant_hlb_settle_bank_type"]; // 要取this的实例，只能用不同函数，不能用箭头函数
      },
      settlementPeriodList: function (state) {
        return state.common["merchant_hlb_settlement_period"]; // 要取this的实例，只能用不同函数，不能用箭头函数
      },
      settlementModeList: function (state) {
        return state.common["merchant_hlb_settlement_mode"]; // 要取this的实例，只能用不同函数，不能用箭头函数
      },
      merchantCategoryList: function (state) {
        return state.common["merchant_entry_hlb_merchant_category"]; // 要取this的实例，只能用不同函数，不能用箭头函数
      },
    }),
  },
  created() {},
  mounted() {
    if(this.orType == 'edit'){
        this.fileType();
    }
  },
  methods: {
    //选择经营类别
    handleCategory() {
      this.getMcc();
    },
    getNodes(value) {
      console.log("value", value);
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const data = {
            ...this.ruleForm,
          };
          this.$emit("firstSuccess", data, "first");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },

  
    //获取行业类别编码
    getMcc() {
      const params = {
        merchantType: this.ruleForm.merchantType,
        merchantCategory: this.ruleForm.merchantCategory,
      };
      getMcc(params)
        .then((res) => {
          const { result } = res;
          console.log("行业类型编码", res.result);
          this.industryTypeCodeList = result;
          if (result.length == 0) {
            this.showIndustryTypeCode = true;
            this.industryTypeCode = "";
          } else {
            this.showIndustryTypeCode = false;
          }
        })
        .finally(() => {
          this.loading = false;
        });
    },
    //选择长期有效
    changeCardValidType(value) {
      this.ruleForm.idCardEndDate = "";
      this.$refs.ruleForm.fields.map((i) => {
        if (i.prop === "idCardEndDate") {
          i.clearValidate();
        }
      });
    },
    fileType() {
      this.ruleForm.type = this.oneEditData.type; //开通子账户支付公司
      this.ruleForm.merchantType = this.oneEditData.merchantType; //子商户类型
      this.ruleForm.merchantCategory = this.oneEditData.merchantCategory; //经营类别
      this.ruleForm.industryTypeCode = this.oneEditData.industryTypeCode; //行业类型编码
      this.ruleForm.signName = this.oneEditData.signName; //公司账号名称：
      this.ruleForm.showName = this.oneEditData.showName; //展示名
      this.ruleForm.idType = this.oneEditData.idType; //法人证件类型
      this.ruleForm.legalPerson = this.oneEditData.legalPerson; //法人名字
      this.ruleForm.legalPersonID = this.oneEditData.legalPersonID; //法人身份证号
      this.ruleForm.idCardValidType = this.oneEditData.idCardValidType;
      this.ruleForm.idCardStartDate = this.oneEditData.idCardStartDate; //法人身份证开始日期
      this.ruleForm.idCardEndDate = this.oneEditData.idCardEndDate; //法人身份证结束日期
      this.ruleForm.businessDateStart = this.oneEditData.businessDateStart; //经营起始日期
      this.ruleForm.businessDateLimit = this.oneEditData.businessDateLimit; //经营期限
      this.ruleForm.orgNum = this.oneEditData.orgNum; //组织机构代码
      this.ruleForm.businessLicense = this.oneEditData.businessLicense; //营业执照号
      this.ruleForm.regionCodes = this.oneEditData.regionCodes; //区县编码
      this.ruleForm.address = this.oneEditData.address; //通讯地址
      this.ruleForm.linkman = this.oneEditData.linkman; //联系人
      this.ruleForm.linkManId = this.oneEditData.linkman;
      this.ruleForm.linkPhone = this.oneEditData.linkPhone; //联系电话
      this.ruleForm.email = this.oneEditData.email; //联系邮箱
      this.ruleForm.bankName = this.oneEditData.bankName; //结算卡银行
      this.ruleForm.bankBranch = this.oneEditData.bankBranch; //结算卡银行支行
      this.ruleForm.bankCode = this.oneEditData.bankCode; //结算卡联行号
      this.ruleForm.accountName = this.oneEditData.accountName; //开户名
      this.ruleForm.accountNo = this.oneEditData.accountNo; //开户账号
      this.ruleForm.settleBankType = this.oneEditData.settleBankType; //结算卡类型
      this.ruleForm.settlementPeriod = this.oneEditData.settlementPeriod; //结算类型
      this.ruleForm.settlementMode = this.oneEditData.settlementMode; //结算卡方式
    },
  },
};
</script>
<style lang="scss" scoped>
@import "../style/moneyList";
</style>
